<template>
  <div id="tmpl">
     <!-- <mt-swipe :auto="2000">
        <mt-swipe-item v-for="item in list">
          <img :src="item.img">
        </mt-swipe-item>
      </mt-swipe> -->
      <slider :imgs='list'></slider>
      <!-- 九宫格 -->
      <div class="mui-content">
		        <ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                  <router-link to="/news/newslist">
		                    <span class="mui-icon mui-icon-home"></span>
		                    <div class="mui-media-body">商品资讯</div>
                  </router-link>
                </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                  <router-link to="/photo/photolist">
		                    <span class="mui-icon mui-icon-email">
                        </span>
		                    <div class="mui-media-body">图片分享</div>
                  </router-link>
                </li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                  <router-link to="/goods/goodslist">
		                    <span class="mui-icon mui-icon-chatbubble"></span>
		                    <div class="mui-media-body">商品购买</div>
                  </router-link>
                </li>
		        
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                  <router-link to="/say">
		                    <span class="mui-icon mui-icon-search"></span>
		                    <div class="mui-media-body">留言反馈</div>
                  </router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                  <router-link to="/vidio">
		                    <span class="mui-icon mui-icon-phone"></span>
		                    <div class="mui-media-body">视频专区</div>
                  </router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                  <router-link to="callme">
		                    <span class="mui-icon mui-icon-gear"></span>
		                    <div class="mui-media-body">联系我们</div>
                  </router-link></li>

		        </ul> 
		</div>

  </div>
</template>

<script>
import common from './kits/common.js'
import { Toast } from 'mint-ui';
import slider from './subcom/slider.vue';
  export default{
    data(){
      return{
          list:[]
    }
      },
      components:{
       slider
      },
      created(){
        this.getimg();
      },
      methods:{
        getimg(){
            this.$http.get(common.apidomain+'/api/getlunbo').then(function(res){
              if(res.body.status !=0){
                  Toast('res.body.message');
                  return;
              }
              this.list = res.body.message;
              
            })
        }
      }
     
  }
</script>

<style scoped>
#tmpl{
  margin-bottom: 0px;
}
  .mint-swipe{
    height: 250px;
   width: 100%;
  }
  .mint-swipe-item{
   width: 100%;
    height: 250px;  
  }
  .mint-swipe-item img{
    height:100%;
    width: 100%;
    display: block;
  }
 #tmpl .mui-content , .mui-grid-view {
    background-color: white;
     margin: 0px;
  }
  .mui-grid-view.mui-grid-9 .mui-table-view-cell{
    border:none;
  }
  .mui-icon-home:before,.mui-icon-email:before,
  .mui-icon-chatbubble:before,.mui-icon-search:before
  ,.mui-icon-phone:before,.mui-icon-gear:before{
    content:'';
    display: inline-block;
    width:50px;
    height: 50px;
    background-repeat: round;
  }
  .mui-icon-home:before{
    background-image: url('../../imgs/1.png');
  }
  .mui-icon-email:before{
    background-image: url('../../imgs/2.png');
  }
  
  .mui-icon-chatbubble:before{
    background-image: url('../../imgs/3.png');
  }
  
  .mui-icon-search:before{
    background-image: url('../../imgs/4.png');
  }
  
  .mui-icon-phone:before{
    background-image: url('../../imgs/5.png');
  }
  
  .mui-icon-gear:before{
    background-image: url('../../imgs/6.png');
  }
</style>
